<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化demo</title>
    <link href="css/common.css" rel="stylesheet">
</head>
<body>
	<!--顶部-->
	<header class="header left">
	    <div class="left nav">
	        <ul>
	            <li class="nav_active"><i class="nav_1"></i><a href="index.html">采集概况</a> </li>
	            <li><i class="nav_2"></i><a href="quota.html">指标分析</a> </li>
	            <li><i class="nav_3"></i><a href="trend.html">趋势分析</a> </li>
	            <li><i class="nav_4"></i><a href="chronic.html">慢病病人列表</a> </li>
	            </ul>
	    </div>
	    <div class="header_center left" style="position:relative">
	        <h2><strong>大数据展示</strong></h2>
	    </div>
	    <div class="right nav text_right">
	        <ul>
	        </ul>
	    </div>
	
	</header>
	<!--内容部分-->
	<div class="con left">
	    <!--数据总概-->
	    <div class="con_div loadItem" data-url="data/countNum.json" data-type="count">
	        <div class="con_div_text left">
	            <div class="con_div_text01 left">
	                <img src="images/info_1.png" class="left text01_img"/>
	                <div class="left text01_div">
	                    <p>总采集数据量(G)</p>
	                    <p class="_count0">0</p>
	                </div>
	            </div>
	            <div class="con_div_text01 right">
	                <img src="images/info_2.png" class="left text01_img"/>
	                <div class="left text01_div">
	                    <p>当月采集数据量(G)</p>
	                    <p class="_count1">0</p>
	                </div>
	            </div>
	        </div>
	        <div class="con_div_text left">
	            <div class="con_div_text01 left">
	                <img src="images/info_3.png" class="left text01_img"/>
	                <div class="left text01_div">
	                    <p>总门诊数(人)</p>
	                    <p class="sky _count2">0</p>
	                </div>
	            </div>
	            <div class="con_div_text01 right">
	                <img src="images/info_4.png" class="left text01_img"/>
	                <div class="left text01_div">
	                    <p>当月门诊数(人)</p>
	                    <p class="sky _count3">0</p>
	                </div>
	            </div>
	        </div>
	        <div class="con_div_text left">
	
	            <div class="con_div_text01 left">
	                <img src="images/info_5.png" class="left text01_img"/>
	                <div class="left text01_div">
	                    <p>总住院数(人)</p>
	                    <p class="org _count4">0</p>
	                </div>
	            </div>
	            <div class="con_div_text01 right">
	                <img src="images/info_6.png" class="left text01_img"/>
	                <div class="left text01_div">
	                    <p>当月住院数(人)</p>
	                    <p class="org _count5">0</p>
	                </div>
	            </div>
	        </div>
	    </div>
	    <!--统计分析图-->
	    <div class="div_any">
	        <div class="left div_any01">
	            <div class="div_any_child">
	                <div class="div_any_title"><img src="images/title_1.png">各医院采集数据量</div>
	                <!-- 饼状图 data-ring='["40%", "70%"]' 环大小， data-label="center" label显示在中间data-style="percent "显示百分比 -->
	                <p class="p_chart loadItem" data-url="data/shujudaxiao.json" data-type="pie" data-ring='["40%", "70%"]' 
	                	data-color='["#87cefa","#ff7f50","#32cd32","#da70d6"]' data-label="center" data-style="percent "></p>
	            </div>
	            <div class="div_any_child">
	                <div class="div_any_title"><img src="images/title_2.png">各医院门诊住院费用</div>
	                <!-- 饼状图data-style="vertical" 横向显示 stack堆叠  -->
	                <p id="histogramChart" class="p_chart loadItem" data-url="data/feiyong.json" data-type="bar" data-style="vertical stack nosplitx nosplity label:insideRight "
	                	data-bar-width="66%"
	                	data-legend-style="CB,#fff" data-grid-style="bottom:20%,top:5%,right:5%" data-axis-color="#fff" data-color='["#87cefa","#ff7f50","#32cd32","#da70d6"]'></p>
	            </div>
	        </div>
	        <div class="div_any02 left ">
	            <div class="div_any_child div_height">
	                <div class="div_any_title any_title_width"><img src="images/title_0.png">济南市地图 </div>
	                <div id="mapChart" style="width:97.5%;height:95%;display: inline-block;padding-left: 1.25%;padding-top:2.2%"></div>
	            </div>
	        </div>
	        <div class="right div_any01">
	            <div class="div_any_child">
	                <div class="div_any_title"><img src="images/title_3.png">数据采集条数(当日)</div>
	                <!-- 折线图 data-showtext="ysuffix:k条"y轴显示后缀  -->
	                <p id="lineChart" class="p_chart loadItem" data-url="data/shujutiaoshu.json" data-type="line" data-style="smooth nosplity" data-axis-color="#fff,line:#034c6a"
	                	data-color='["#87cefa","#ff7f50","#32cd32","#da70d6"]' data-showtext="ysuffix:k条" data-legend-style="CB,#fff" data-grid-style="bottom:20%,top:5%"></p>
	            </div>
	            <div class="div_any_child">
	                <div class="div_any_title"><img src="images/title_4.png">就诊人数(当日)</div>
	                 <!-- 折线图 data-showtext="ysuffix:k条"y轴显示后缀  -->
	                <p id="lineChart2" class="p_chart loadItem" data-url="data/jiuzhenrenshu.json" data-type="line" data-style="smooth nosplity" data-axis-color="#fff,line:#034c6a"
	                	data-color='["#87cefa","#ff7f50","#32cd32","#da70d6"]' data-showtext="ysuffix:k条" data-legend-style="CB,#fff" data-grid-style="bottom:20%,top:5%"></p>
	            </div>
	        </div>
	    </div>
	
	    <div id="el-dialog" class="hide">
	        <div class="xc_layer"></div>
	        <div class="popBox" id="printView">
	            <div class="ttBox"><span class="tt" id="reportTitle">第一医院</span><img src="images/close.png" style="width: 30px;float: right;cursor: pointer;" title="关闭弹窗" class="close"/></div>
	            <div class="txtBox" id="el-dialog_body">
	             <div style="height:100%;width: 98%;margin-left: 1%;">
	               <div class="left div_any01" style="width: 64%;">
	                   <div class="div_any_child">
	                       <div class="div_any_title"><div type="text" class="demo-input" id="date1" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="images/title_4.png">门诊住院人次</div>
	                       <!-- 折线图,data-style="smooth nospace"平滑模式 两边无空白 data-autoload="close"表示不自动加载，需要手动调用 -->
	                       <p id="lineChart3" class="p_chart loadItem " data-autoload="close" data-url="data/zhuyuanrenci.json" data-type="line" data-style="smooth nospace" data-color='["#87cefa","#ff7f50"]' data-grid-style='bottom:20%'
	                        shieldSettings="{dataZoom: {show: true,realtime : true,start: 0,end: 18,height: 20,backgroundColor: '#f8f8f8',dataBackgroundColor: '#e4e4e4',fillerColor: '#87cefa',handleColor: '#87cefa'}}"></p>
	                   </div>
	                   <div class="div_any_child">
	                       <div class="div_any_title"><div type="text" class="demo-input" id="date2" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="images/title_7.png">医疗费用</div>
	                       <!-- 折线图,data-autoload="close"表示不自动加载，需要手动调用data-style="smooth nospace"平滑模式 两边无空白,dataZoomend: 18数据窗口范围的结束百分比,表示18%  -->
	                       <p id="lineChart4" class="p_chart loadItem" data-autoload="close" data-url="data/yiliaofeiyong.json" data-type="line" data-style="smooth nospace" data-color='["#87cefa","#ff7f50"]' data-grid-style='bottom:20%'
	                        shieldSettings="{dataZoom: {show: true,start: 0,end: 18,backgroundColor: '#f8f8f8',dataBackgroundColor: '#e4e4e4',fillerColor: '#87cefa',handleColor: '#87cefa'}}"	></p>
	                   </div>
	               </div>
	               <div class="left div_any01"  style="width: 32%;">
	                   	<div class="div_any_child">
							<div class="div_any_title"><div type="text" class="demo-input" id="date3" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="images/title_18.png">病人年龄段分布</div>
	                      	<!--  饼状图, data-autoload="close"表示不自动加载，需要手动调用data-rose='area'玫瑰图样式 data-ring='[30, 110]' 环半径 data-label="close"关闭label -->
	                       	<p id="pieChart2" class="p_chart loadItem" data-autoload="close" data-url="data/nianlingduan.json" data-type="pie" data-color='["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"]'
	                       		data-rose='area' data-ring='[30, 110]' data-legend=""></p>
	                   	</div>
	                   	<div class="div_any_child">
	                       	<div class="div_any_title"><div type="text" class="demo-input" id="date4" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="images/title_20.png">医疗费用组成</div>
	                       	<!--  饼状图, data-autoload="close"表示不自动加载，需要手动调用data-rose='area'玫瑰图样式 data-ring='[30, 110]' 环半径 data-label="close"关闭label -->
	                       	<p id="pieChart3" class="p_chart loadItem" data-autoload="close" data-url="data/yiliaofeiyong2.json" data-type="pie" data-color='["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"]'
	                       		data-rose='area' data-ring='[30, 110]' data-legend=""></p>
	                   	</div>
	               </div>
	
	             </div>
	            </div>
	        </div>
	    </div>
	
	</div>
	<script type="text/javascript" src="../../js/jquery-2.2.1.min.js"></script>
	<script type="text/javascript" src="../../js/echarts.min.js"></script>
	<script type="text/javascript" src="../../js/point_util.js"></script>
	<!-- 依赖原数据插件 -->
	<script type="text/javascript" src="../../../webjars/shieldjs/depends/jquery.metadata.js"></script>
	<script type="text/javascript" src="../../../webjars/shieldjs/core/shield.util.js"></script>
	<!-- 处理 -->
	<script type="text/javascript" src="../../js/charts.deal.pie.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.bar.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.line.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.map.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.list.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.count.js"></script>
	<script type="text/javascript" src="../../js/charts.base.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.extend.js"></script>
	<script type="text/javascript" src="../../js/charts.tool.js"></script>
	
	<script src="js/bmap.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=m6oLN8CbTG4b64Kcbr186EZS"></script>
    <script type="text/javascript">
    $(".close").click(function(){
    	 $("#el-dialog").addClass('hide');
    });
    //地图
    var mapChart = echarts.init(document.getElementById('mapChart'));
    // 百度地图坐标拾取 http://api.map.baidu.com/lbsapi/getpoint/index.html
    mapChart.setOption({
        bmap: {
            center: [117.000923,36.675807],
            zoom: 12,
            roam: true,

        },
        tooltip : {
            trigger: 'item',
            formatter:function(params, ticket, callback){
                return params.value[2]
            }
        },
        series: [{
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: [
              [117.000923,36.675807, '济南市'] ,
              [117.052199,36.718598, '济南第一医院'] ,
              [116.973148,36.620176, '济南人民医院'],
              [117.049037,36.658865, '济南中医院'],
              [117.079795,36.650295, '济南第五医院'],
             ]
        }]
    });
    // 点击地图弹出 弹出框
    mapChart.on('click', function (params) {
        $("#el-dialog").removeClass('hide');
        $("#reportTitle").html(params.value[2]);
        $("#el-dialog .loadItem").kvcharts("refresh"); //刷新
    });

    var bmap = mapChart.getModel().getComponent('bmap').getBMap();
    // BMAP_NORMAL_MAP：地图\BMAP_SATELLITE_MAP：卫星\BMAP_HYBRID_MAP ：混合
    bmap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP ]}));
    bmap.setMapStyle({style:'midnight'}); //颜色
    </script>
</body>
</html>
